<template>
	<div>
		<div v-for="(item,index) in list" :key="index">
		<!-- 	// 1-2-0  2个图片地址
			// 1-1-1    3个图片地址
			// 4-1-1    3个图片地址
			// 3-0-0   1个图片地址 -->
			<div v-if="item.type=='1-2-0'" class="img-box1">
				<div class="grid-1">
					<!-- <img class="img" src="/static/images/main-1.jpg" alt=""> -->
					<image class="img" :src="item.images[0].url"  @click="skipDetail(item.images[0])" mode="aspectFill" fade-show lazy-load/>
				</div>
				<div class="grid-2" v-if="item.images.length>1">
					<!-- <img class="img" src="/static/images/main-1.jpg" alt=""> -->
					<image @click="skipDetail(item.images[1])" class="img" :src="item.images[1].url" mode="aspectFill"  fade-show lazy-load/>
				</div> 
			</div>
			<div v-if="item.type=='1-1-1'" class="img-box2">
				<div class="grid-1">
					<!-- <img class="img" src="/static/images/main-1.jpg" alt=""> -->
					<image class="img" :src="item.images[0].url" @click="skipDetail(item.images[0])" mode="aspectFill" fade-show lazy-load/>
				</div>
				<div class="grid-2" v-if="item.images.length>1">
					<!-- <img class="img" src="/static/images/main-1.jpg" alt=""> -->
					<div class="img1-box">
						<image class="img" :src="item.images[1].url" @click="skipDetail(item.images[1])" mode="aspectFill"  fade-show lazy-load/>
					</div>
					<div class="img2-box">
						<image class="img" :src="item.images[2].url" @click="skipDetail(item.images[2])" mode="aspectFill" fade-show lazy-load/>
					</div>
				</div> 
			</div>
			<div v-if="item.type=='4-1-1'" class="img-box3">
				<div class="grid-1">
					<!-- <image class="img" src="/static/images/main-1.jpg" mode="aspectFit"  fade-show lazy-load/> -->	 
					<image class="img" :src="item.images[0].url" @click="skipDetail(item.images[0])" mode="aspectFill"  fade-show lazy-load/>
				</div>
				<div class="grid-2">	 
					<image v-if="item.images.length>1" class="img" :src="item.images[1].url" @click="skipDetail(item.images[1])" mode="aspectFill"  fade-show lazy-load/>
					<image v-if="item.images.length>2" class="img" :src="item.images[2].url" @click="skipDetail(item.images[2])" mode="aspectFill"  fade-show lazy-load/>
					<!-- <div class="up-box"><image class="img" src="/static/images/main-1.jpg" mode="aspectFit"  fade-show lazy-load/></div>
					<div class="down-box"><image class="img" src="/static/images/main-1.jpg" mode="aspectFit"  fade-show lazy-load/></div> -->
				</div>
			</div>
			<div v-if="item.type=='3-0-0'" class="img-box4">
				<image class="img" :src="item.images[0].url" @click="skipDetail(item.images[0])" mode="widthFix"  fade-show lazy-load/>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { useUserStore } from "@/stores";
	import {getPicCardsApi} from "@/api/index.js";
	import useShare from "@/utils/composables/useShare";
	const userStore = useUserStore();
	const { userId } = storeToRefs(userStore);
	const {onShareAppMessage,onShareTimeline}=useShare(); 
	const list=ref([]);
	const currType=ref('');
	const skipDetail=(item={})=>{
		const {jumpType,path}=item;
		if(jumpType=='MP'){
			//跳转小程序
			wx.navigateToMiniProgram({
			  appId: path,
			  path: '',
			  // extraData: {
			  //   foo: 'bar'
			  // },
			  //envVersion: 'develop',
			  success(res) {
			    // 打开成功
			  }
			})
		}
		if(jumpType=='PT'){
			//跳转富文本页面--id=xxx
			if(userId.value){
				uni.navigateTo({
					url:`/pages/subPackageA/pictureCardsDetail/index?id=${path}`
				})
			}else{
				uni.navigateTo({
					url:'/pages/subPackageA/login/index'
				})
			}	 
		}
	}
	const getModeList=(type)=>{
		if(!type)return
		getPicCardsApi({position:type}).then(res=>{	 
			list.value=res.data?.map(v=>{
				const {images,...reset}=v;
				let images_=[];
				try{
					if(images){
						images_= JSON.parse(images);
					}
				}catch{}
				//console.log(images_,'----images_');
				return {
					 images:images_,
					...reset
				}
			}).filter(v=>v.images?.length>0)||[];
			console.log(res,list.value,'----图片菜单--res---');
		})
	}	
	onPullDownRefresh(() => {
	    getModeList(currType.value)
	    setTimeout(() => {
	        uni.stopPullDownRefresh();
	    }, 3000);
	});
	onLoad((options)=>{
		console.log(options.type,'---options.type---');
		currType.value=options.type;
		getModeList(options.type)
	})
</script>
<style>
	page{
		background-color:#a6a6a6;
	}
</style>
<style lang="scss" scoped>
	.img{
		display:block;
		margin:0;
		background:#000;
	}
	.img-box1{
		width:100%;
		display:flex;
		// display: grid;
		// /* 关键：1fr和2fr实现1:2比例 */
		// grid-template-columns: 1fr 2fr;
		gap: 10rpx; /* 列间距 */
		margin-bottom:10rpx;
		.grid-1{
			flex:1;
			aspect-ratio: 1/1;
			.img{
				width:100%;
				height:100%;
				 
			}
		}
		.grid-2{
			flex:2;
			aspect-ratio: 2/1;
			.img{
				width:100%;
				 height:100%;
			}
		}
	}
	.img-box2{
		display:flex;
		// display: grid;
		// /* 关键：1fr和2fr实现1:2比例 */
		// grid-template-columns: 1fr 1fr 1fr;
		margin-bottom:10rpx;
		gap:10rpx;
		.grid-1{
			flex:1;
			aspect-ratio: 1/1;
			.img{
				width:100%;
				height:100%;
				 
			}
		}
		.grid-2{
			flex:2;
			display:flex;
			gap:10rpx;
			.img1-box{
				flex:1;
				aspect-ratio: 1/1;
			}
			.img2-box{
				flex:1;
				aspect-ratio: 1/1;
			}
			// aspect-ratio: 2/1;
			.img{
				width:100%;
				 height:100%;
			}
		}
		// .grid{
		// 	flex:1;
		// 	aspect-ratio: 1/1;
		// 	.img{
		// 		width:100%;
		// 		height:100%;
		// 		//aspect-ratio: 1/1;
		// 	}
		// }
	}
	.img-box4{
		.img{
			width:100%;
		}
		margin-bottom:10rpx;
	}
	.img-box3{
		 display:flex;
		 //flex-direction:  row-reverse;
		//display: grid;
		// /* 关键：1fr和2fr实现1:2比例 */
		//grid-template-columns: 2fr 1fr;
		gap:10rpx;
		margin-bottom:10rpx;
		.grid-1{
			//flex:2;
			width:67%;
			flex:0 0 67%;
			.img{
				width:100%;
				aspect-ratio: 1/1;
			}
		}
		.grid-2{	
			flex:auto;
			// flex:1;
			display:flex;
			flex-direction: column;
			gap:10rpx;
			justify-content: space-between;
			.img{
				width:100%;
				height:100%;
				// aspect-ratio: 1/1;
			}
		}
		// .grid-1{
		// 	flex:2;
		// 	.img{
		// 		width:100%;
		// 		aspect-ratio: 1/1;
		// 	}
		// }
		// .grid-2{
		// 	flex:1;
		// 	display:flex;
		// 	flex-direction: column;
		// 	gap:16rpx;
		// 	justify-content: space-between;
		// 	.img{
		// 		width:100%;
		// 		height:100%;
		// 		// aspect-ratio: 1/1;
		// 	}
		// }
	}
	.img-box5{
		 display:flex;
		 flex-direction:  row-reverse;
		gap:10rpx;
		margin-bottom:10rpx;
		.grid-1{
			flex:2;
		 
			.img{
				width:100%;
				aspect-ratio: 1/1;
			}
		}
		.grid-2{
			 
			flex:1;
			display:flex;
			flex-direction: column;
			gap:10rpx;
			justify-content: space-between;
		 
			.img{
				width:100%;
				height:100%;
				// aspect-ratio: 1/1;
			}
		}
		// .grid-1{
		// 	flex:2;
		 
		// 	.img{
		// 		width:100%;
		// 		aspect-ratio: 1/1;
		// 	}
		// }
		// .grid-2{
			 
		// 	flex:1;
		// 	display:flex;
		// 	flex-direction: column;
		// 	gap:16rpx;
		// 	justify-content: space-between;
		 
		// 	.img{
		// 		width:100%;
		// 		height:100%;
		// 		// aspect-ratio: 1/1;
		// 	}
		// }
	}
</style>